<!--无线滚动列表 -->
<template>
  <div class="comp-list">
    <slot></slot>
    <block v-if="isEmpty">
      <slot name="empty"></slot>
      <div class="hint-text empty"  v-if="!$slots.empty">{{ emptyText }}</div>
    </block>
    
    <!-- <div v-show="isLoading">
      <slot name="loading"></slot>
      <div class="loading-wrapper" v-if="!$slots.loading ">
        <image class="loading-icon" src="/static/loading.gif"/>
        <p class="hint-text loading">{{ loadingText }}</p>
      </div>
    </div> -->
    <basic-loading :isLoading="isLoading" />
    <p class="hint-text finshed" v-if="!isEmpty && isFinished">{{ finishedText }}</p>
    
    <p id="listEnd" class="listEnd"></p>
  </div>
</template>
<script>
import sdk from 'sdk'

export default {
  name: 'comp-list',
  props: {
    isFinished: { type: Boolean, default: false },  
    isEmpty: { type: Boolean, default: false }, 
    finishedText: { type: String, default: '没有更多了' }, 
    isLoading: { type: Boolean, default: false },
    loadingText: { type: String, default: '加载中...' }, 
    emptyText: { type: String, default: '暂无商品' }, 
  },
  mounted() {
    // console.log('===== mounted =========', this)
    this._observer = sdk.createIntersectionObserver(this)
    this._observer
      .relativeToViewport({ bottom: 100 })
      .observe('#listEnd', (res) => {
        if (res.intersectionRatio) {
          console.log('load')
          this.$emit('load');
        }
      })
  },
  beforeDestroy() {
    this._observer.disconnect()
  }
}
</script>

<style lang="less" scoped>
.comp-list {
  .listEnd {
    width: 100%;
    height: 1px;
  }
  .hint-text {
    color: @font_light_color;
    font-size: 24rpx;
    margin: 40rpx;
    text-align: center;

    &.loading {
      margin: 0;
    }
  }
}
</style>